        Vue.component('login-form', {
            template: `
                <section>
                    <div class="color"></div>
                    <div class="color"></div>
                    <div class="color"></div>
                    <div class="box">
                        <div class="square" style="--i:0;"></div>
                        <div class="square" style="--i:1;"></div>
                        <div class="square" style="--i:2;"></div>
                        <div class="square" style="--i:3;"></div>
                        <div class="square" style="--i:4;"></div>
                        <div class="container">
                            <div class="form">
                                <h2>{{ title }}</h2>
                                <form @submit.prevent="handleSubmit">
                                    <div class="inputBox">
                                        <input 
                                            type="text" 
                                            placeholder="ID" 
                                            v-model="username"
                                            :class="{'error': errors.username}"
                                            @focus="clearError('username')"
                                        >
                                    </div>
                                    <div v-if="errors.username" class="error-message">{{ errors.username }}</div>
                                    
                                    <div class="inputBox">
                                        <input 
                                            type="password" 
                                            placeholder="Password" 
                                            v-model="password"
                                            :class="{'error': errors.password}"
                                            @focus="clearError('password')"
                                        >
                                    </div>
                                    <div v-if="errors.password" class="error-message">{{ errors.password }}</div>
                                    
                                    <div class="remember">
                                        <input type="checkbox" id="remember" v-model="rememberMe">
                                        <label for="remember">记住我</label>
                                    </div>
                                    
                                    <div class="inputBox">
                                        <input type="submit" :value="isLoading ? '登录中...' : 'Login'" :disabled="isLoading">
                                    </div>
                                    
                                    <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
                                    
                                    <p class="forget">忘记密码?<a href="#" @click.prevent="handleForgetPassword">点击这里</a></p>
                                    <p class="forget">还没有账号?<a href="#" @click.prevent="switchToRegister">注册</a></p>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
            `,
            data() {
                return {
                    title: '校园技能互助平台',
                    username: '',
                    password: '',
                    rememberMe: false,
                    errors: {
                        username: '',
                        password: ''
                    },
                    isLoading: false,
                    successMessage: ''
                };
            },
            methods: {
                validateForm() {
                    let isValid = true;
                    this.errors = { username: '', password: '' };
                    
                    if (!this.username) {
                        this.errors.username = '请输入用户名';
                        isValid = false;
                    }
                    
                    if (!this.password) {
                        this.errors.password = '请输入密码';
                        isValid = false;
                    } else if (this.password.length < 6) {
                        this.errors.password = '密码长度不能少于6位';
                        isValid = false;
                    }
                    
                    return isValid;
                },
                clearError(field) {
                    this.errors[field] = '';
                },
                handleSubmit() {
                    if (this.validateForm()) {
                        this.isLoading = true;
                        
                        // 模拟API调用
                        setTimeout(() => {
                            this.isLoading = false;
                            this.successMessage = '登录成功！正在跳转...';
                            
                            // 检查是否已注册（模拟从localStorage读取）
                            const registeredUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
                            const userExists = registeredUsers.some(user => 
                                user.username === this.username && user.password === this.password
                            );
                            
                            if (userExists) {
                                // 存储登录状态
                                localStorage.setItem('currentUser', JSON.stringify({
                                    username: this.username,
                                    rememberMe: this.rememberMe
                                }));
                                
                                // 跳转到首页
                                setTimeout(() => {
                                    window.location.href = 'forum.html';
                                }, 1500);
                            } else {
                                this.successMessage = '';
                                this.errors.username = '用户名或密码错误';
                            }
                        }, 1500);
                    }
                },
                handleForgetPassword() {
                    alert('密码重置功能即将实现');
                },
                switchToRegister() {
                    // 在实际应用中，这里会跳转到注册页面
                    window.location.href = 'register.html';
                }
            },
            mounted() {
                // 检查是否有记住的用户
                const savedUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
                if (savedUser.rememberMe && savedUser.username) {
                    this.username = savedUser.username;
                    this.rememberMe = true;
                }
            }
        });

        new Vue({
            el: '#app'
        });